<template>
  <div class="detail">
    <!-- 商品分类导航 -->
    <!-- 主要内容区域 -->
    <section class="con">
      <!-- 导航路径区域 -->
      <div class="conPoin">
        <span>首页</span>
        <span>居家生活</span>
        <span>床品套件</span>
        <span>一人眠·针织三件套</span>
      </div>
      <!-- 主要内容区域 -->
      <div class="mainCon" >
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <Zoom v-if="goodList.imgList" :image="goodList.imgList[currentIndex]" />
          <!-- 小图列表 -->
          <ImageList 
          v-if="goodList.imgList"
          :image="goodList.imgList" 
          :currentIndex.sync="currentIndex"/>
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <div class="goodsDetail">
            <h3 class="InfoName">{{ goodList.name }}</h3>
            <p class="InfoName-sub">{{ goodList.simpleDesc }}</p>
            <span class="haoping">
              <span class="haoping-num">99.7%</span>
              <br />
              <span class="haoping-text">好评率 ></span>
            </span>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">价格</div>
                <div class="price">
                  <i>¥</i>
                  <em>{{ goodList.retailPrice }}</em>
                  <span>¥219</span>
                </div>
              </div>
              <div class="priceArea2">
                <div class="title">
                  <i>促销</i>
                </div>
                <div class="fixWidth">
                  <i class="red-bg">加价购</i>
                  <em class="t-gray">
                    满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品
                  </em>
                </div>
              </div>
            </div>
            <div class="support">
              <div class="supportArea">
                <div class="title">购物返</div>
                <div class="fixWidth">最高返 17积分</div>
              </div>
              <div class="supportArea">
                <div class="title">配 送 至</div>
                <div class="fixWidth">广东省 深圳市 宝安区</div>
              </div>
              <div class="supportArea1">
                <div class="title">服务</div>
                <div class="fixWidth">国内部分地区不可配送</div>
              </div>
            </div>
          </div>

          <div class="choose">
            <div class="chooseArea">
              <div class="choosed"></div>
              <!-- <dl v-for="saleAttr in spuSaleAttrList" :key="saleAttr.id"> -->
              <dl
                v-for="skuSpecList in detailList.skuSpecList"
                :key="skuSpecList.id"
              >
                <dt class="title">{{ skuSpecList.name }}</dt>
                <dd
                  :class="{ active: skuSpecListValue.isChecked === '1' }"
                  v-for="skuSpecListValue in skuSpecList.skuSpecValueList"
                  :key="skuSpecListValue.id"
                  @click="
                    setSkuSpecListValueActive(
                      skuSpecListValue,
                      skuSpecList.skuSpecValueList
                    )
                  "
                >
                  {{ skuSpecListValue.value }}
                </dd>
              </dl>
            </div>
          </div>
          <InputNumber v-model="goodNum"/>
          <div class="cartWrap">
            <div class="add">
              <!-- <a @click="addCart">加入购物车</a> -->
              <a href="#">立即购买</a>
              <a @click="addCart">加入购物车</a>
              <button class="add-b">收藏</button>
              <a>下载严选APP</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 内容详情页 -->
    <section>
      <Carousel />
      <div class="down-container">
        <div class="intro">
          <ul class="tab-wraped">
            <li class="active">
              <a href="###">详情</a>
            </li>
            <li>
              <a href="###">评价(11998)</a>
            </li>
            <li>
              <a href="###">常规问题</a>
            </li>
          </ul>
          <div class="tab-content">
            <div id="one" class="tab-pane active">
              <ul
                class="goods-intro"
                v-for="(detail, index) in detailList.attrList"
                :key="index"
              >
                <li>{{ detail.attrName }}:{{ detail.attrValue }}</li>
              </ul>
              <div class="intro-detail">
                <img class="intro-d-img" src="./images/intro01.png" />
                <img class="intro-d-img" src="./images/intro02.png" />
                <img class="intro-d-img" src="./images/intro03.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="intro-right">
          <div class="right-head">
            <h4>24小时热销榜</h4>
          </div>
          <div class="right-img">
            <div>
              <img src="./images/hover-down.jpg" />
              <div class="img-name">
                A类雪绒抗菌95%鹅绒被
                <br />
                经典升级
              </div>
              <div class="img-price">
                <span>¥</span>
                <span>599</span>
                <span class="old-price">
                  <span>¥</span>
                  <span>700</span>
                </span>
              </div>
            </div>
          </div>
          <div class="right-img">
            <div>
              <img src="./images/hover-down.jpg" />
              <div class="img-name">
                A类雪绒抗菌95%鹅绒被
                <br />
                经典升级
              </div>
              <div class="img-price">
                <span>¥</span>
                <span>599</span>
                <span class="old-price">
                  <span>¥</span>
                  <span>700</span>
                </span>
              </div>
            </div>
          </div>
          <div class="right-img">
            <div>
              <img src="./images/hover-down.jpg" />
              <div class="img-name">
                A类雪绒抗菌95%鹅绒被
                <br />
                经典升级
              </div>
              <div class="img-price">
                <span>¥</span>
                <span>599</span>
                <span class="old-price">
                  <span>¥</span>
                  <span>700</span>
                </span>
              </div>
            </div>
          </div>
          <div class="right-img">
            <div>
              <img src="./images/hover-down.jpg" />
              <div class="img-name">
                A类雪绒抗菌95%鹅绒被
                <br />
                经典升级
              </div>
              <div class="img-price">
                <span>¥</span>
                <span>599</span>
                <span class="old-price">
                  <span>¥</span>
                  <span>700</span>
                </span>
              </div>
            </div>
          </div>
          <div class="right-img">
            <div>
              <img src="./images/hover-down.jpg" />
              <div class="img-name">
                A类雪绒抗菌95%鹅绒被
                <br />
                经典升级
              </div>
              <div class="img-price">
                <span>¥</span>
                <span>599</span>
                <span class="old-price">
                  <span>¥</span>
                  <span>700</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import InputNumber from '@/components/InputNumber'
import Carousel from '@/components/Carousel'
import ImageList from './ImageList/ImageList'
import Zoom from './Zoom/Zoom'
import { reqGetSearchList, reqGetDetailList } from '@/api/index'

export default {
  name: 'detail',
  data() {
    return {
      goodList: [],
      attributeList: [],
      goodNum: 1,
      detailList: [],
      currentIndex: 0,
     
    }
  },
  props: {
    itemNumber: {
      type: Number,
      default: 0,
    },
  },
  // created(){
  //   this.goodList =goodList[this.itemNumber].categoryItemList[0].itemList[0];
  // },
  async mounted() {
    const [goodList, detailList] = await Promise.all([
      reqGetSearchList(),
      reqGetDetailList(),
    ])
    if (this.$route.query.id === "3995824") {
      this.goodList =goodList[this.itemNumber].categoryItemList[0].itemList[0];
    } else {
      this.goodList =goodList[this.itemNumber].categoryItemList[0].itemList[1];
    }
    // console.log(detailList)
    this.detailList = detailList[this.itemNumber].item
    // console.log(goodList)
  },
  methods: {
    setSkuSpecListValueActive(skuSpecListValue, skuSpecValueList) {
      skuSpecValueList.forEach(
        (skuSpecListValue) => (skuSpecListValue.isChecked = '0')
      )
      skuSpecListValue.isChecked = '1'
    },
    addCart() {
      const { goodList, goodNum } = this
      sessionStorage.setItem(
        'goods',
        JSON.stringify({
          goodName: goodList.name,
          price: goodList.retailPrice,
          goodNum,
          goodDefaultImg: goodList.scenePicUrl,
          Id:goodList.id,
          // down:goodList.down
        })
      )
      this.$router.push({
        name: 'ShopCart1',
      })
    },
  },
  components: {
    InputNumber,
    Carousel,
    Zoom,
    ImageList,
  },
}
</script>

<style lang="less" scoped>
.detail {
  padding: 0 200px;
  .con {
    width: 1100px;
    margin: 15px auto 0;

    .conPoin {
      padding: 9px 15px 9px 0;

      & > span + span:before {
        content: '/\00a0';
        padding: 0 5px;
        color: #ccc;
      }
    }

    .mainCon {
      overflow: hidden;
      margin: 5px 0 15px;

      .previewWrap {
        float: left;
        width: 400px;
        position: relative;
      }

      .InfoWrap {
        width: 650px;
        float: right;

        .InfoName {
          font-size: 20px;
          line-height: 21px;
          margin-bottom: 10px;
        }

        .news {
          color: #999;
          margin-top: 20px;
          font-size: 15px;
          height: 20px;
        }
        .haoping {
          float: right;
          position: relative;
          bottom: 25px;
          cursor: pointer;
        }

        .priceArea {
          background: #f5f3ef;
          padding: 10px;
          margin-top: 13px;

          .priceArea1 {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            .title {
              float: left;
              margin-right: 15px;
            }

            .price {
              float: left;
              color: #c81623;
              text-align: center;
              position: relative;

              i {
                font-size: 16px;
              }

              em {
                font-size: 24px;
                font-weight: 700;
                margin-left: 12px;
              }

              span {
                font-size: 12px;
                padding-left: 15px;
                bottom: 10px;
                color: #999;
                text-decoration: line-through;
              }
            }
          }

          .priceArea2 {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            .title {
              margin-right: 15px;
              float: left;
            }

            .fixWidth {
              width: 520px;
              float: left;

              .red-bg {
                background: #c81623;
                color: #fff;
                padding: 3px;
              }

              .t-gray {
                color: #999;
              }
            }
          }
        }

        .support {
          background: #f5f3ef;
          border-bottom: 1px solid #ededed;
          padding-bottom: 5px;

          .supportArea {
            overflow: hidden;
            line-height: 28px;
            padding-left: 10px;

            .title {
              margin-right: 15px;
              float: left;
            }

            .fixWidth {
              width: 520px;
              float: left;
              color: #999;
            }
          }
          .supportArea1 {
            border-top: 1px dashed #999;
            overflow: hidden;
            line-height: 28px;
            padding-left: 10px;

            .title {
              margin-right: 15px;
              float: left;
            }

            .fixWidth {
              cursor: pointer;
              width: 520px;
              float: left;
              color: #999;
            }
          }
        }

        .choose {
          .chooseArea {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            dl {
              overflow: hidden;
              margin: 13px 0;

              dt {
                margin-right: 15px;
                float: left;
              }

              dd {
                float: left;
                margin-right: 5px;
                color: #666;
                line-height: 24px;
                padding: 2px 14px;
                border-top: 1px solid #eee;
                border-right: 1px solid #bbb;
                border-bottom: 1px solid #bbb;
                border-left: 1px solid #eee;

                &.active {
                  color: black;
                  border: 2px solid #b4a078;
                }
              }
            }
          }
        }
        .cartWrap {
          .add {
            display: flex;

            a {
              width: 168px;
              height: 50px;
              line-height: 50px;
              font-size: 18px;
              margin-right: 10px;
              border: 1px solid #ccc;
              text-align: center;
            }
            .add-b {
              text-align: center;
              height: 49px;
              width: 50px;
              border: 1px solid #ccc;
              padding: 1px 0;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
  .down-container {
    margin-top: 30px;
  }
  .intro {
    width: 750px;
    float: left;
    margin-right: 35px;
    display: block;
    .tab-wraped {
      background: #ededed;
      // border: 1px solid #ddd;
      overflow: hidden;
      height: 44px;
      margin-bottom: 10px;

      li {
        float: left;
        border: 1px solid #ddd;
        border-bottom: none;
        width: 124px;
        height: 46px;

        &.active {
          a {
            // border: 0;
            background: white;
            color: #d0c4ab;
          }
        }

        a {
          display: block;
          height: 46px;
          line-height: 46px;
          padding: 0 11px;
          text-align: center;
          color: #666;
          background: #fcfcfc;
        }
      }
    }
    .goods-intro {
      display: block;
      li {
        padding: 8px 30px;
        float: left;
        width: 300px;
        line-height: 24px;
        font-size: 14px;
        border-bottom: 1px dashed #e8e8e8;
      }
    }
    .intro-detail {
      width: 750px;
      img {
        width: 100%;
      }
    }
  }
  .intro-right {
    float: right;
    display: block;
    width: 300px;
    border: 1px solid #ededed;
    .right-head {
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 18px;
      border: 1px solid #ededed;
      background: #e8e8e8;
    }
    .right-img {
      text-align: center;
      box-sizing: border-box;
      padding: 24px 24px 0 24px;
      border: 1px solid white;
      img {
        height: 250px;
        width: 250px;
      }
      .img-name {
        margin: 0 34px;
        font-size: 14px;
        max-height: 40px;
        margin: 6px 0 8px 0;
      }
      .img-price {
        font-size: 14px;
        line-height: 1;
        color: #da3939;
        .old-price {
          margin-left: 5px;
          color: #9a9a9a;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
